<template>
	<view class="emoji" :style="{height:height+'px'}">
		<view class="emoji-line">
			<view class="emoji-line-item" v-for="(item,i) in emojiList" :key="i"
				:style="{ backgroundImage: 'url(' + item.url + ')'}" @click.stop="clickEmoji(item)"></view>
		</view>

	</view>
</template>

<script>
	import emojiList from "@/static/json/emojiList.json"

	export default {
		name: "emoji",
		props: {
			height: {
				type: Number,
				default: 260
			},

		},
		data() {
			return {
				emojiList
			};
		},
		mounted() {},
		methods: {
			clickEmoji(e) {
				this.$emit('emotion', e)
			}
		}
	}
</script>

<style lang="scss">

	.emoji {
		width: 100%;
		height: 460rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

		.emoji-line {
			margin-left: 10rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;


			.emoji-line-item {
				margin: 14rpx;
				width: 120rpx;
				height: 120rpx;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;

			}
		}

	}

	.slider {
		width: 375;
		height: 128;

		&-emoji {
			width: 375;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;

			&-icon {
				width: 53%;
				text-align: center;
				padding: 10.5 0;
			}
		}
	}

	// <!-- 设置最后一列左靠齐 -->
	.lastbox {
		justify-content: flex-start;
	}
</style>